import React, { Component } from 'react'
import { 
  HashRouter as Router, // 类似于vue的hash
  Switch, // 定义多个路由表示只能同时展示1个
  Route, // 定义路由的规则 ---- 三种定义的方式 
  Redirect, // 重定向
  NavLink
} from 'react-router-dom'
import Footer from './Footer'
import './style.scss'
// 引入页面的组件
import Home from './views/home/index'
// import Kind from './views/kind/index'
// import Cart from './views/cart/index'
// import User from './views/user/index'
// import Detail from './views/detail/index'
const Kind = React.lazy(() => import('./views/kind/index'))
const Cart = React.lazy(() => import('./views/cart/index'))
const User = React.lazy(() => import('./views/user/index'))
const Detail = React.lazy(() => import('./views/detail/index'))
export default class App extends Component {
  render() {
    return (
      // 一定要使用Router 包裹组件
      <Router>
        <div className="container">
          <div className="tip">请将屏幕竖向浏览</div>
          {/* 展示定义路由 --- 一切皆组件 */}
          {/* Switch 表示同时只有一个路由是生效的 */}
          {/* React 定义路由的 几种方式 */}
          <React.Suspense fallback = { <div>正在加载。。。。</div> }>
            <Switch>
              {/* component 形式 */}
              <Route path="/home" component = { Home } />
              {/* children 形式 */}
              <Route path="/kind" >
                <Kind />
              </Route>
              {/* render 形式 */}
              <Route path="/cart" render = { () => {
                return (<Cart />)
              }}/>
              <Route path="/user" component = { User } />
              <Route path="/detail/:proid" >
                <Detail />
              </Route>
              <Redirect path="/" exact to="/home" />
            </Switch>
          </React.Suspense>
          <Switch>
            <Route path="/home" component = { Footer }/>
            <Route path="/cart" component = { Footer }/>
            <Route path="/user" component = { Footer }/>
          </Switch>
          
        </div>
      </Router>
    )
  }
}
